<template>
  <div>
    <!-- 卡片视图区 -->
    <el-card>
      <div>
        <h3>会议室预定记录</h3>
      </div>
      <el-table :data="recordList"
                border
                stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="会议室" prop="bname"></el-table-column>
        <el-table-column label="日期" prop="cDate"></el-table-column>
        <el-table-column label="开始时间" prop="cBeginTime"></el-table-column>
        <el-table-column label="结束时间" prop="cEndTime"></el-table-column>
        <el-table-column label="主题" prop="comments"></el-table-column>
        <el-table-column label="操作" >
          <template slot-scope="scope">
            <!-- 修改按钮 -->
            <el-tooltip effect="dark"
                        content="修改"
                        placement="top"
                        :enterable="false">
              <el-button type="primary"
                         icon="el-icon-edit"
                         size="mini"
                         @click="showUpd(scope.row)"></el-button>
            </el-tooltip>
            <!-- 删除按钮 -->
            <el-tooltip effect="dark"
                        content="删除"
                        placement="top"
                        :enterable="false">
              <el-button type="danger"
                         icon="el-icon-delete"
                         size="mini"
                         @click="doDel(scope.row.conId)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column> 
      </el-table>

      <!-- 分页 -->
      <el-pagination @current-change="handleCurrentChange"
                     :current-page="current"
                     :page-size="5"
                     layout="prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </el-card>


    <el-dialog title="修改预约信息"
               :visible.sync="updDialogVisible"
               width="50%"
               @close="updDialogClosed">
      <!-- 内容主体 -->
      <el-form :model="eidtForm"
               :rules="editFormRules"
               ref="editFormRef"
               label-width="180px">
        <el-form-item label="房间名">
          <el-input v-model="eidtForm.bName" disabled></el-input>
        </el-form-item>
        <el-form-item label="开始日期"
                      prop="cDate">
          <el-date-picker placeholder="选择日期" 
                          v-model="eidtForm.cDate" 
                          :clearable="false"
                          :picker-options="pickerOptions"
                          :editable="false"
                          value-format="yyyy-MM-dd"
                          style="width: 100%"></el-date-picker>
        </el-form-item>
        <el-form-item label="开始时间"
                      prop="beginTime">
          <el-select v-model="eidtForm.beginTime"
                          placeholder="请选择开始时间" style="width: 100%">
              <el-option
                v-for="item in timeOptions"
                :key="item.value"
                :value="item.value">
              </el-option> 
          </el-select>
        </el-form-item>
        <el-form-item label="结束时间"
                      prop="endTime">
          <el-select v-model="eidtForm.endTime"
                    placeholder="请选择结束时间"
                    style="width: 100%">
              <el-option
                v-for="item in timeOptions"
                :key="item.value"
                :value="item.value">
              </el-option> 
          </el-select>
        </el-form-item>
        <el-form-item label="会议主题"
                      prop="comment">
          <el-input v-model="eidtForm.comment"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部按钮区 -->
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="updDialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="doUpd">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        userId: window.sessionStorage.getItem('loginUserId'),
        current: 1,
        total: 0,
        loginUserUmail: window.sessionStorage.getItem('loginUserUmail'),
        recordList: [],
        updDialogVisible: false,
        eidtForm: {
          id: '',
          bName: '',
          cDate: '',
          beginTime: '',
          endTime: '',
          comment: ''
        },
        editFormRules: {
          cDate: { required: true, message: '请选择预定日期', trigger: 'blur' },
          beginTime: {required: true, message: '请选择开始时间', trigger: 'blur'},
          endTime: {required: true, message: '请选择结束时间', trigger: 'blur'},
          comment: {required: true, message: '请输入会议主题', trigger: 'blur'},
        },
        timeOptions: [
        {
          value: '09:00:00'
        },
        {
          value: '09:30:00'
        },
        {
          value: '10:00:00'
        },
        {
          value: '10:30:00'
        },
        {
          value: '11:00:00'
        },
        {
          value: '11:30:00'
        },
        {
          value: '12:00:00'
        },
        {
          value: '12:30:00'
        },
        {
          value: '13:00:00'
        },
        {
          value: '13:30:00'
        },
        {
          value: '14:00:00'
        },
        {
          value: '14:30:00'
        },
        {
          value: '15:00:00'
        },
        {
          value: '15:30:00'
        },
        {
          value: '16:00:00'
        },
        {
          value: '16:30:00'
        },
        {
          value: '17:00:00'
        },
        {
          value: '17:30:00'
        },
        {
          value: '18:00:00'
        },
        {
          value: '18:30:00'
        },
        {
          value: '19:00:00'
        },
        {
          value: '19:30:00'
        },
        {
          value: '20:00:00'
        },
        {
          value: '20:30:00'
        },
        {
          value: '21:00:00'
        },
        ],
        pickerOptions:{
          disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        }
      },
      }
    },
    created() {
      this.getUserConferenceList();
    },
    methods: {
      async getUserConferenceList(){
        let param = this.$qs.stringify({
          用户ID: this.userId,
          页: this.current
        })
        let url = 'api/Conference/maintain' + '?' + param;
        const {data: res} = await this.$axios.get(url);
        if(res.code !== 200){
          return this.$message.error(res.data);
        }
        this.recordList = res.data.records;
        this.total = res.data.total;
      },
      handleCurrentChange(newCurrent){
        this.current = newCurrent;
        this.getUserConferenceList();
      },
      async showUpd(info){
        this.eidtForm.id = info.conId;
        this.eidtForm.bName = info.bname;
        this.updDialogVisible = true;
      },
      updDialogClosed(){
        this.$refs.eidtFormRef.resetFields();
      },
      doUpd(){
        let url = 'api/Conference/put';
        let params = this.$qs.stringify({
          预约id: this.eidtForm.id, 
          房间名: this.eidtForm.bName,
          开始日期: this.eidtForm.cDate,
          开始时间: this.eidtForm.beginTime,
          结束时间: this.eidtForm.endTime,
          会议主要内容: this.eidtForm.comment
        })
        this.$refs.editFormRef.validate(async (valid) => {
          if (!valid) return;
          const { data: res } = await this.$axios.put(url, params);
          if (res.code !== 200) {
            return this.$message.error('更新预约信息失败！');
          }
          this.updDialogVisible = false;
          this.getUserConferenceList();
          this.$message.success('更新预约信息成功！');
        })
      },
      //根据id删除对应的信息
      async doDel(conId) {
        //弹框询问
        const res = await this.$confirm('此操作将永久删除该预约信息, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).catch(error => 
            error
          )
        //确认删除，返回值为字符串 confirm
        //取消删除，返回值为字符串 cancel
        if(res !== 'confirm'){
          return this.$message.info('您取消了删除！')
        }
        let param = this.$qs.stringify({
          预约id: conId
        })
        let url = 'api/Conference/delete/' + '?' + param;
        this.$axios.delete(url)
          .then(res => {
            if(res.data.code !== 200){
              return this.$message.error('删除失败！');
            }
            this.$message.success('删除成功！');
            this.getUserConferenceList();
          })
          .catch( err => 
            err
          )
      },
    }

  }
</script>

<style lang="less" scoped>

</style>